<template>
  <div class="add-friend">
    <!-- 查询 -->
    <div class="add-friend-content" :class="{ 'add-friend-content2': showInfo }">
      <img src="../../../assets/images/tools/bg-search.png" alt="" />
      <!-- 输入框 -->
      <el-input
        v-model.trim="phoneNumber"
        placeholder="请输入手机号/微信号搜索"
        clearable
        maxlength="30"
        style="width: 320px"
        show-word-limit
        @focus="clearErrMsg()"
      ></el-input>
      <p class="err-msg">
        <span v-if="errMsg" v-text="errMsg"></span>
      </p>
      <el-button type="warning" class="search-button" icon="el-icon-search" @click="searchNumber(phoneNumber)">
        查询
      </el-button>
    </div>
    <!-- 查询结果 -->
    <el-drawer
      v-loading="loading"
      element-loading-text="查询中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.6)"
      class="add-friend-drwer"
      :modal="false"
      :visible.sync="showInfo"
      :with-header="false"
    >
      <div class="search-result">
        <div class="name-avatar">
          <div class="nick-name">
            <p v-text="searchResult.NickName || ''"></p>
            <p v-text="searchResult.UserName || ''"></p>
          </div>
          <el-avatar :size="72" :src="searchResult.Avatar" shape="square">
            <i class="fa fa-picture-o" aria-hidden="true" title="头像miss"></i>
          </el-avatar>
        </div>
        <ul class="other-info">
          <li>
            <p class="other-info-tip">性 别</p>
            <p v-text="searchResult.Gender || ''"></p>
          </li>
          <li>
            <p class="other-info-tip">城 市</p>
            <p>
              <span v-text="searchResult.Province || ''"></span>
              <span v-text="searchResult.City || ''"></span>
            </p>
          </li>
          <li>
            <p class="other-info-tip">号 码</p>
            <p v-text="searchResult.SearchText || ''"></p>
          </li>
          <li>
            <p class="other-info-tip">结 果</p>
            <p v-if="searchResult.ErrMsg" v-text="searchResult.ErrMsg"></p>
            <p v-else-if="searchResult.IsFriend">'已经是好友'</p>
            <p v-else-if="searchResult.SearchText">'不是好友'</p>
            <p v-else></p>
          </li>
        </ul>
        <el-button
          v-if="!alreadyAdd"
          size="medium"
          :disabled="searchResult.ErrMsg || searchResult.IsFriend ? true : false"
          class="add-to-address-btn"
          @click="addFriendByWxid"
        >
          添加到通讯录
        </el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
export default {
  name: 'ToolsAddFriend',
  // filters: {
  //   timeFilter(time) {
  //     time = parseInt(time / 10000, 10)
  //     return new Date(time).toLocaleString()
  //   }
  // },
  data() {
    return {
      phoneNumber: '', // 要搜索的号码
      errMsg: '', // 错误信息
      showInfo: false, // 错误信息
      loading: false, // 查询状态
      alreadyAdd: false // 已经添加
      // 要提交的表单
      // addFriendForm: {
      //   number: '',
      //   message: '',
      //   memo: ''
      // },
      // // 表单验证
      // rules: {
      //   number: [
      //     { required: true, message: '请输入微信号/QQ号/手机号', trigger: 'blur' },
      //     { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
      //   ]
      // }
    }
  },
  computed: {
    ...mapState('tools', {
      searchResult: 'searchResult'
    }),
    ...mapGetters({
      currentWeChatId: 'tools/currentWeChatId'
    })
    // 添加的历史数据
    // tableData() {
    //   return this.$store.getters['nedb/addFriends']
    // }
  },
  watch: {
    // 监听添加结果
    searchResult(val) {
      if (val.WeChatId) {
        this.loading = false
        this.alreadyAdd = false
      }
    }
  },

  beforeDestroy() {
    // 离开页面 重置数据
    this.$store.commit('tools/SET_SEARCH_RESULT', {})
  },
  methods: {
    // 查询联系人
    searchNumber(val) {
      if (!this.currentWeChatId) {
        this.$alert('请选中一个微信！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      const reg = new RegExp(/^1[0-9]{10}$|[a-zA-Z_0-9]{6,20}/)
      if (reg.test(val)) {
        this.showInfo = true
        this.$store.dispatch('websocket/FindContactTask', {
          WeChatId: this.currentWeChatId,
          Content: val
        })
        this.loading = true
      } else {
        this.errMsg = '错误的号码格式'
      }
    },
    // 清除错误信息
    clearErrMsg() {
      this.errMsg = ''
    },
    // 提交表单
    addFriendByWxid() {
      //   如果没有选择微信 给出提示
      this.$prompt('请输入验证语', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /[\s\S]{0,50}/,
        inputErrorMessage: '验证语格式不正确'
      })
        .then(({ value }) => {
          if (this.currentWeChatId) {
            const msg = {
              WeChatId: this.currentWeChatId, // 商家所属微信号
              Phones: [this.phoneNumber], // 要添加的手机号码，批量
              message: value, // 发送的验证消息
              Remark: '', // 备注名
              TaskId: new Date().getTime() * 10000 + parseInt(Math.random() * 10000, 10) // 任务Id
            }
            this.$store.dispatch('websocket/AddFriendsTask', msg)
            this.alreadyAdd = true
          } else {
            this.$message({
              message: '请先选择微信！',
              type: 'warning'
            })
          }
        })
        .catch(() => {})
    }
    // // 重置表单
    // resetForm(formName = 'addFriendFormRef') {
    //   this.$refs[formName].resetFields()
    // }
  }
}
</script>

<style lang="scss" scoped>
.add-friend {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px 10px 20px;

  position: relative;

  .add-friend-content {
    width: 371px;
    height: 313px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .err-msg {
      color: #f56c6c;
      margin: 0 20px;
      width: 100px;
      height: 30px;
      line-height: 30px;
    }

    ::v-deep .search-button {
      font-size: 14px;
      padding: 10px 30px;
      color: #fff;
      background-color: #ff9f00;
    }
  }

  .add-friend-content2 {
    margin-right: 350px;
    transition-duration: 500ms;
  }

  ::v-deep .add-friend-drwer {
    // width: 369px;
    // height: 650px;
    position: absolute;
    right: 0 !important;
    // left: 670px;
    .el-drawer__container {
      .el-drawer {
        width: 369px !important;
        // height: 650px;
        background: rgba($color: #333, $alpha: 0.1);
        .search-result {
          width: 100%;
          height: 100%;
          padding: 41px 20px;
          display: flex;
          flex-direction: column;
          .name-avatar {
            width: 318px;
            height: 100px;
            border-bottom: $border-color-base solid 1px;
            display: flex;
            justify-content: space-between;
            .nick-name {
              display: flex;
              flex-direction: column;
              p {
                font-size: 18px;
                padding: 5px 0;
                padding-top: 0;
                color: #333333;
              }
              p:nth-child(2) {
                color: #999999;
                font-size: 14px;
                padding-top: 5px;
              }
            }
          }
          .other-info {
            margin-top: 25px;
            display: flex;
            flex-direction: column;
            padding: 0 32px;
            li {
              display: flex;
              align-items: center;
              font-size: 14px;
              color: #333333;
              .other-info-tip {
                color: #999999;
                width: 42px;
                height: 30px;
                line-height: 30px;
              }
            }
          }
        }
        .add-to-address-btn {
          background: #ffffff;
          color: #ff8b29;
          border: solid #ff8b29 1px;
          width: 137px;
          margin: 0 auto;
          margin-top: 40px;
        }
      }
    }
  }
}
</style>
